<template>
  <div>
    <div class="nav">
      <headNav title=""></headNav>
    </div>
    <div class="report_body">
      <div plain @click="showPlugin" class="repTime">
        <span>报告日期:</span>
        <span style="margin-left: 0.1rem">{{ reportTime }}</span>
        <img
          src="@/assets/img/actReport/icon_down.png"
          style="margin-left: 0.1rem"
        />
      </div>
      <!-- 地图 -->
      <div class="rep_map">
        <div class="pieContext">活动轨迹</div>
        <div class="map">
          <amap ref="ampa" :heatData="heatData"></amap>
        </div>
        <!-- 详情 -->
        <div class="title_body" v-show="list.length > 0">
          <div class="txtAli">
            <div class="wid">进入时间</div>
            <div class="wid">地点</div>
            <div class="wid"></div>
          </div>
          <div v-for="(item, index) in list" :key="index">
            <progressBox>
              <div slot="title" class="titleList">
                <div
                  :class="item.buildingName == '展开全部' ? 'vertical' : 'mar'"
                >
                  {{ item.passTime }}
                </div>
                <div
                  class="mar"
                  v-if="item.buildingName == '展开全部'"
                  @click="spread('act')"
                >
                  <span style="color: #128fef">展开全部</span>
                  <img src="@/assets/img/actReport/icon_arrow.png" />
                </div>
                <div class="mar" v-else>{{ item.buildingName }}</div>
                <div class="mar" @click="ImgClick(item.faceImgUrl)">
                  <img
                    v-show="item.faceImgUrl"
                    :src="item.faceImgUrl"
                    width="30"
                    height="30"
                  />
                </div>
              </div>
            </progressBox>
          </div>
          <div
            style="text-align: center"
            @click="packup('act')"
            v-if="!actIshide"
          >
            <span style="color: #128fef">收起</span>
            <img src="@/assets/img/actReport/icon_packup.png" />
          </div>
        </div>
        <div
          class="title_body"
          style="text-align: center"
          v-show="list.length <= 0"
        >
          暂无数据
        </div>
      </div>
      <!-- 统计图 -->
      <div class="dataSta">
        <div class="reportPie">
          <div class="pieContext">消费统计</div>
          <div v-show="pieData.length > 0">
            <repPie :data="pieData" :todayConsume="todayConsume"></repPie>
          </div>
          <div
            style="text-align: center; margin-top: 1rem"
            v-show="pieData.length <= 0"
          >
            暂无数据
          </div>
        </div>
        <div class="peiTotal">
          今日消费<span style="color: #ff0000">{{ todayConsume }}</span
          >元,余额<span style="color: #ff0000">{{ accountBalance }}</span
          >元
        </div>
        <!-- 详情 -->
        <div class="title_body" v-show="statisticsList.length > 0">
          <div class="txtAli">
            <div class="wid">消费项</div>
            <div class="wid">消费时间</div>
            <div class="wid">消费金额</div>
          </div>
          <div v-for="(item, index) in statisticsList" :key="index">
            <progressBox>
              <div slot="title" class="titleList">
                <div
                  :class="item.orderAmount == '展开全部' ? 'vertical' : 'mar'"
                >
                  {{ item.payTimeStr }}
                </div>
                <div
                  :class="item.orderAmount == '展开全部' ? 'vertical' : 'mar'"
                >
                  {{ item.consumeTypeName }}
                </div>
                <div
                  class="mar"
                  v-if="item.orderAmount == '展开全部'"
                  @click="spread('sta')"
                >
                  <span style="color: #128fef">展开全部</span>
                  <img src="@/assets/img/actReport/icon_arrow.png" />
                </div>
                <div class="mar" v-else>{{ item.orderAmount }}元</div>
              </div>
            </progressBox>
          </div>
          <div
            style="text-align: center"
            @click="packup('sta')"
            v-if="!staIshide"
          >
            <span style="color: #128fef">收起</span>
            <img src="@/assets/img/actReport/icon_packup.png" />
          </div>
        </div>
      </div>
      <!-- 课堂答题 -->
      <div class="answer">
        <div class="pieContext">课堂答题</div>
        <div class="a_title">
          <ul>
            <li>科目</li>
            <li>总答题数</li>
            <li>正确数</li>
            <li>正确率</li>
          </ul>
        </div>
        <div v-for="(item, index) in answerList" :key="index" class="list_item">
          <ul>
            <li>{{ item.subjectName }}</li>
            <li>{{ item.questionCount }}</li>
            <li>{{ item.rightCount }}</li>
            <li>
              {{ convert(item.rightPerfect)
              }}<i v-if="item.rightPerfect > 0">%</i>
            </li>
          </ul>
        </div>
      </div>
      <!-- 收获点评 -->
      <div class="answer">
        <div class="pieContext">收获点评</div>
        <div class="appraise" v-show="evaluateList.length > 0">
          <div
            v-for="(item, index) in evaluateList"
            :key="index"
            class="appraise_item"
            :class="item.type == 2 ? 'backgr' : ''"
          >
            {{ item.reviewTypeName }}
            <i v-show="item.type == 2">-</i>
            <i v-show="item.type == 1">+</i>
            {{ item.score }}
          </div>
        </div>
        <div v-show="evaluateList.length <= 0" class="evEmty">
          <span>暂无数据</span>
        </div>
      </div>
    </div>
    <imgDialog
      :imgSrc="imgSrc"
      :showHideOnBlur="showHideOnBlur"
      @imgClose="imgClose"
    ></imgDialog>
  </div>
</template>
<script>
import headNav from "@/components/headNav/headNav";
import progressBox from "@/components/progress_box";
import imgDialog from "./share/imgDialog";
import { Datetime, Group, XButton } from "vux";
import amap from "./map";
import repPie from "./share/rep_pie";
import moment from "moment";
import {
  getTimeList,
  getMap,
  getStudentDailyAnswer,
  getStatistics,
  getEvaluateList,
  getStudentDetail,
  getSchoolDetail,
} from "@/api/actReport";
import { mapActions, mapState, mapGetters, mapMutations } from "vuex";
export default {
  components: {
    headNav,
    Datetime,
    XButton,
    progressBox,
    amap,
    repPie,
    imgDialog,
  },
  computed: {
    ...mapState({
      studentId: (state) => state.user.studentId,
      schoolId: (state) => state.user.schoolId,
    }),
  },
  data() {
    return {
      heatData: [],
      reportTime: "",
      list: [],
      getSosItem: "",
      // 统计详情
      statisticsList: [],
      // 答题详情
      answerList: [],
      // 评论详情
      evaluateList: [],
      loginUserId: "",
      pieData: [],
      // 账户余额
      accountBalance: "0",
      // 今日消费
      todayConsume: "0",
      // 统计展开后数据
      unfolLater: [],
      // 统计展开前数据
      unfolBefore: [],
      // 统计详情的展开与收起
      staIshide: true,
      // 活动展开后数据
      actLater: [],
      // 活动展开前数据
      actBefore: [],
      // 活动的展开与收起
      actIshide: true,
      imgSrc: "",
      showHideOnBlur: false,
    };
  },
  async mounted() {
    this.reportTime = moment(new Date()).format("YYYY-MM-DD");
    this.getInfo();
    await this.getSchoolInfo();
    await this.getMap();
    this.getEvaluateList();
    this.getStudentDailyAnswer();
    await this.getStudentDetail();
    await this.getStatistics();
  },
  methods: {
    // 弹出时间控件
    async showPlugin() {
      let _this = this;
      _this.actIshide = true;
      _this.staIshide = true;
      this.$vux.datetime.show({
        cancelText: "取消",
        confirmText: "确定",
        format: "YYYY-MM-DD",
        value: _this.reportTime,
        async onConfirm(val) {
          console.log("plugin confirm", val);
          _this.reportTime = val;
          _this.getInfo();
          await _this.getSchoolInfo();
          await _this.getMap();
          _this.getEvaluateList();
          _this.getStudentDailyAnswer();
          await _this.getStudentDetail();
          await _this.getStatistics();
        },
        onShow() {
          console.log("plugin show");
        },
        onHide() {
          console.log("plugin hide");
        },
      });
    },
    // 获取学生指定时间段行踪列表
    async getInfo() {
      this.list = [];
      this.actBefore = [];
      this.actLater = [];
      const params = {
        activityDate: this.reportTime,
        studentId: this.studentId,
      };
      let res = await getTimeList(params);
      if (res.status == 200) {
        this.actLater = res.data;
        if (res.data.length > 4) {
          let len = res.data.length;
          let cen = {
            passTime: "......",
            buildingName: "展开全部",
            faceImgUrl: "",
          };
          this.actBefore.push(res.data[0]);
          this.actBefore.push(res.data[1]);
          this.actBefore.push(cen);
          this.actBefore.push(res.data[len - 2]);
          this.actBefore.push(res.data[len - 1]);
          this.list = this.actBefore;
        } else {
          this.list = res.data;
        }
      }
    },
    // 获取学生指定时间段gps轨迹热力图
    async getMap() {
      this.heatData = [];
      let endTime = "";
      var myDate = new Date(this.reportTime);
      var year = myDate.getFullYear();
      var month = myDate.getMonth() + 1;
      var date = myDate.getDate() + 1;
      if (month < 10) {
        month = "0" + month;
      }
      if (date < 10) {
        date = "0" + date;
      }
      endTime = year + "-" + month + "-" + date;
      const params = {
        beginTime: this.reportTime,
        endTime: endTime,
        studentId: this.studentId,
      };
      let res = await getMap(params);
      if (res.status == 200) {
        let data = [];
        res.data.forEach((item) => {
          let str = {
            lng: item.cLongitude,
            lat: item.cLatitude,
            count: 10,
          };
          data.push(str);
        });
        this.heatData = data;
      } else {
        this.heatData = [];
      }
    },
    // 根据时间查询学生的课堂答题信息
    async getStudentDailyAnswer() {
      this.answerList = [];
      const params = {
        currentDate: this.reportTime,
        studentId: this.studentId,
      };
      let res = await getStudentDailyAnswer(params);
      if (res.status == 200) {
        this.answerList = res.data;
      }
    },
    // 根据时间查询学生消费统信息
    async getStatistics() {
      this.unfolBefore = [];
      this.unfolLater = [];
      this.statisticsList = [];
      this.staIshide = true;
      const params = {
        currentDate: this.reportTime,
        schoolId: this.schoolId,
        userId: this.loginUserId,
      };
      let res = await getStatistics(params);

      if (res.status == 200) {
        if (res.data.pieChartData) {
          this.pieData = res.data.pieChartData.map((item) => {
            return {
              name: item.businessName,
              value: item.orderAmount,
            };
          });
        } else {
          this.pieData = [];
        }
        this.tempList = res.data.listConsumeBaseInfo;
        this.accountBalance = res.data.accountBalance;
        this.todayConsume = res.data.todayConsume;
        this.unfolLater = res.data.listConsumeBaseInfo;
        if (res.data.listConsumeBaseInfo.length > 4) {
          let len = res.data.listConsumeBaseInfo.length;
          let cen = {
            payTimeStr: "......",
            consumeTypeName: "......",
            orderAmount: "展开全部",
          };
          this.unfolBefore.push(res.data.listConsumeBaseInfo[0]);
          this.unfolBefore.push(res.data.listConsumeBaseInfo[1]);
          this.unfolBefore.push(cen);
          this.unfolBefore.push(res.data.listConsumeBaseInfo[len - 2]);
          this.unfolBefore.push(res.data.listConsumeBaseInfo[len - 1]);
          this.statisticsList = this.unfolBefore;
        } else {
          this.statisticsList = this.unfolLater;
        }
      }
    },
    // 获取学生当日评价
    async getEvaluateList() {
      this.evaluateList = [];
      const params = {
        reviewDate: this.reportTime,
        studentId: this.studentId,
      };
      let res = await getEvaluateList(params);
      if (res.status == 200) {
        this.evaluateList = res.data;
      }
    },
    // 获取学生信息
    async getStudentDetail() {
      const params = {
        studentIds: this.studentId,
      };
      let res = await getStudentDetail(params);
      if (res.items.length > 0) {
        this.loginUserId = res.items[0].loginUserId;
      } else {
        this.loginUserId = "";
      }
    },
    // 数据统计展开全部
    spread(str) {
      if (str == "sta") {
        this.statisticsList = this.unfolLater;
        this.staIshide = false;
      } else {
        this.list = this.actLater;
        this.actIshide = false;
      }
    },
    // 数据统计收起
    packup(str) {
      if (str == "sta") {
        this.statisticsList = this.unfolBefore;
        this.staIshide = true;
      } else {
        this.list = this.actBefore;
        this.actIshide = true;
      }
    },
    // 点统图片弹出大图片
    ImgClick(item) {
      wx.previewImage({
        current: item,
        urls: [item],
      });
    },
    // 关闭图片弹窗
    imgClose() {
      this.showHideOnBlur = false;
    },
    // 转换率
    convert(num) {
      if (!num) {
        return;
      }
      return parseInt(num);
    },
    // 获取学校地图
    async getSchoolInfo() {
      let res = await getSchoolDetail(this.schoolId);
      if (res) {
        this.$refs.ampa.map.setZoomAndCenter(17, [res.longitude, res.latitude]);
      } else {
        this.$refs.ampa.map.setZoomAndCenter(11, [116.397428, 39.90923]);
      }
    },
  },
};
</script>
<style  scoped>
.report_body {
  background: #f6f6f6;
  padding: 0.2rem;
  height: 100%;
}
.repTime {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 0.25rem;
}
.rep_map {
  background: #ffffff;
  margin-top: 0.2rem;
}
h3 {
  text-align: center;
  padding-top: 0.1rem;
}
.map {
  width: 6.3rem;
  height: 5rem;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
 
}
.mar {
  width: 30%;
}
.titleList {
  display: flex;
  /* justify-content: center; */
}
.title_body {
  padding: 0.3rem;
}
.dataSta {
  background: #ffffff;
  margin-top: 0.2rem;
  padding-right: 0.2rem;
  padding-bottom: 0.2rem;
  height: auto;
}
.reportPie {
  height: 3.5rem;
}
.pieContext {
  padding-top: 0.2rem;
  padding-bottom: 0.2rem;
  text-align: center;
  font-weight: bold;
}
.peiTotal {
  text-align: center;
  font-weight: Bold;
}
.answer {
  margin-top: 0.2rem;
  background: #ffffff;
  height: auto;
  padding-bottom: 0.2rem;
}
.a_title {
  display: flex;
  font-weight: bold;
}
ul {
  display: flex;
  width: 100%;
}
li {
  list-style-type: none;
  width: 25%;
  text-align: center;
}
.list_item {
  padding-top: 0.1rem;
}
.appraise {
  display: flex;
  flex-wrap: wrap;
}
.appraise_item {
  width: 30%;
  margin: 0.1rem;
  height: 0.6rem;
  line-height: 0.6rem;
  text-align: center;
  background: #e7f1f8;
}
.vertical {
  width: 30%;
  writing-mode: vertical-lr;
  text-align: center;
}
.evEmty {
  text-align: center;
  height: 1rem;
  line-height: 1rem;
}
.backgr {
  background: #fdf0f0;
  color: #ff0000;
}
.wid {
  width: 30%;
  color: #666666;
}
.txtAli {
  display: flex;
  margin-bottom: 0.2rem;
  width: 90%;
  justify-content: flex-end;
}
</style>

  
